<template>
  <div class="disc">
    <div class="stylus" :class="{ active: playingStatus }"></div>
    <div class="discItem" :class="{ active: playingStatus }">
      <img :src="img | imgURL(246)" alt="" />
    </div>
    <div class="btn">
      <span @click.stop="tofav" :class="{ fav: fav }"></span>
      <span @click.stop="todown"></span>
      <span></span>
      <span @click.stop="tocomment"></span>
      <span></span>
    </div>
    <transition name="fade">
      <div class="sug" v-if="showsug">{{ sugtxt }}</div>
    </transition>
  </div>
</template>

<script>
export default {
  props: ["playingStatus", "img", "playingSong"],
  data: function () {
    return {
      fav: false,
      favList: [],
      sugtxt: "",
      showsug: false,
    };
  },
  watch: {
    playingSong: function (n) {
      // console.log(111);
      this.favList = JSON.parse(localStorage.getItem("fav"));
      let x = this.favList.find((ele) => {
        return ele == n.id;
      });
      if (x) {
        this.fav = true;
      } else {
        this.fav = false;
      }
    },
    // sugtxt: function () {},
  },
  created: function () {},
  methods: {
    toshowsug() {
      this.showsug = true;
      setTimeout(() => {
        this.showsug = false;
      }, 2000);
    },
    tofav() {
      // let arr = [];
      this.favList = JSON.parse(localStorage.getItem("fav"));
      if (this.fav) {
        this.fav = false;
        let n = this.favList.findIndex((ele) => ele == this.playingSong.id);
        this.favList.splice(n - 1, 1);
        this.sugtxt = "取消收藏";
        this.toshowsug();
      } else {
        this.fav = true;
        this.favList.push(this.playingSong.id);
        this.sugtxt = "添加收藏";
        this.toshowsug();
      }
      localStorage.setItem("fav", JSON.stringify(this.favList));
    },
    todown() {
      this.sugtxt = "下载中...";
      this.toshowsug();
    },
    tocomment() {
      this.$parent.$parent.popup = false;
      this.$parent.$parent.$parent.showbar = false;
      this.$router.push({ path: "comment?id=" + this.playingSong.id });
    },
  },
};
</script>

<style lang="less" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
  // transform: translateY(100vh);
}

@keyframes tocircle {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.disc {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  .discItem {
    width: 80vw;
    height: 80vw;
    border-radius: 50%;
    // overflow: hidden;
    background-image: url("../assets/dta.png");
    background-size: 100%;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.1);
    animation: tocircle 15s linear infinite;
    animation-play-state: paused;
    &.active {
      animation-play-state: running;
    }
    img {
      width: 45vw;
      border-radius: 50%;
      vertical-align: middle;
    }
  }
  .stylus {
    transition: all 0.5s linear;
    transform-origin: 17px 30px;
    transform: rotate(325deg);
    position: absolute;
    top: -20px;
    left: calc(50vw - 30px);
    width: 100px;
    height: 185px;
    background-image: url("../assets/dvn.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    z-index: 3;
    &.active {
      transform: rotate(355deg);
    }
  }
  .btn {
    position: absolute;
    bottom: -20px;
    width: 70%;
    display: flex;
    justify-content: space-between;
    span {
      width: 9vw;
      height: 9vw;
      background-image: url("../assets/dtj.png");
      background-position: center;
      background-size: 100%;
      &:nth-child(1) {
        &.fav {
          background-image: url("../assets/ery.png");
        }
      }
      &:nth-child(2) {
        background-image: url("../assets/dty.png");
      }
      &:nth-child(3) {
        background-image: url("../assets/e0e.png");
      }
      &:nth-child(4) {
        background-image: url("../assets/erq.png");
      }
      &:nth-child(5) {
        background-image: url("../assets/et1.png");
      }
    }
  }
  .sug {
    position: absolute;
    bottom: 5vh;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 12px;
    transform: scale(0.9);
    padding: 5px 10px;
    border-radius: 20px;
  }
}
</style>